<template>
    <div>
        <!-- 页面头部导航 -->
        <el-page-header content="简历中心" icon="" title="就业管理系统" />

        <!-- 简历管理布局 -->
        <el-row :gutter="20" class="el-row">
            <!-- 左侧简历列表区域 -->
            <el-col :span="6">
                <el-card class="box-card">
                    <!-- 新增简历按钮 -->
                    <el-button type="primary" @click="handleCreateCv">新增简历</el-button>
                    <!-- 遍历显示已有简历列表 -->
                    <div v-for="item in state.Cvs" :key="item.id">
                        <div class="mb-4">
                            <!-- 简历标题按钮，点击加载简历到编辑区域 -->
                            <el-button type='' @click="clickCv(item.id)">
                                {{ item.title }}
                            </el-button>
                        </div>
                    </div>
                </el-card>
            </el-col>

            <!-- 右侧简历编辑区域 -->
            <el-col :span="18">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>编辑简历</span>
                        </div>
                    </template>

                    <!-- 简历编辑表单 -->
                    <el-form 
                        ref="userFormRef" 
                        :model="state.userForm" 
                        :rules="userFormRules" 
                        label-width="120px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="标题" prop="title">
                            <el-input v-model="state.userForm.title" /> <!-- 简历标题输入 -->
                        </el-form-item>
                        <el-form-item label="求职意向" prop="job_prefer">
                            <el-input v-model="state.userForm.job_prefer" type="textarea" /> <!-- 多行文本输入 -->
                        </el-form-item>
                        <el-form-item label="培训经历" prop="education_exp">
                            <el-input v-model="state.userForm.education_exp" type="textarea" />
                        </el-form-item>
                        <el-form-item label="项目经历" prop="project_exp">
                            <el-input v-model="state.userForm.project_exp" type="textarea" />
                        </el-form-item>
                        <el-form-item label="实习经历" prop="internship">
                            <el-input v-model="state.userForm.internship" type="textarea" />
                        </el-form-item>
                        <el-form-item label="获奖经历" prop="price">
                            <el-input v-model="state.userForm.price" type="textarea" />
                        </el-form-item>
                        <el-form-item label="其他优势" prop="other_advantage">
                            <el-input v-model="state.userForm.other_advantage" type="textarea" />
                        </el-form-item>

                        <!-- PDF上传区域 -->
                        <el-form-item label="简历" prop="cv">
                            <!-- 上传接口地址 -->
                             <!-- 最多上传1个文件 -->
                                <!-- 仅允许PDF格式 -->
                                  <!-- 上传成功回调 -->
                            <el-upload 
                                class="upload-demo" 
                                drag
                                action="/api/picture/upload" 
                                limit="1"                    
                                accept=".pdf"              
                                :on-success="handleUploadAddress"
                            >
                                <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                                <div class="el-upload__text">
                                    将文件拖到此处 <em>点击上传</em>
                                </div>
                                <template #tip>
                                    <div class="el-upload__tip">
                                        仅支持上传100MB以下的PDF文件，每次更新简历请再次上传PDF
                                    </div>
                                </template>
                            </el-upload>
                        </el-form-item>

                        <!-- 提交按钮 -->
                        <el-form-item>
                            <el-button type="primary" @click="submitForm(state.userForm.id)">提交</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup>
import { useStore } from "vuex";
import { ref, reactive, onBeforeMount } from "vue";
import { UploadFilled } from '@element-plus/icons-vue';
import axios from 'axios';
import { ElMessage } from "element-plus";
import router from "@/router";

// 获取Vuex存储实例
const store = useStore();
// 表单引用
const userFormRef = ref();
// 组件状态管理
let state = reactive({
    userForm: { // 简历表单数据
        id: '',           // 简历ID（新增时为空，编辑时为现有ID）
        title: '',        // 标题
        job_prefer: '',   // 求职意向
        education_exp: '',// 培训经历
        project_exp: '',  // 项目经历
        internship: '',   // 实习经历
        price: '',        // 获奖经历
        other_advantage: '',// 其他优势
        cvURL: '',        // 简历PDF存储地址
        author: store.state.userInfo.id // 作者ID（自动填充当前用户ID）
    },
    Cvs: [], // 用户所有简历列表
});

// 表单验证规则（当前均为非必填，可根据需求调整）
const userFormRules = reactive({
    title: [{ required: false, message: "标题", trigger: "blur" }],
    job_prefer: [{ required: false, message: "岗位意向", trigger: "blur" }],
    // 其他字段验证规则类似...
});

// 文件上传成功回调：更新简历PDF地址
const handleUploadAddress = (URL) => {
    state.userForm.cvURL = URL; // 将上传成功返回的URL赋值给表单
    console.log(URL); // 打印文件地址（调试用）
};

// 新增简历处理函数：清空表单数据
const handleCreateCv = () => {
    state.userForm = {
        id: '',
        title: '',
        job_prefer: '',
        // 清空所有字段
        education_exp: '',
        project_exp: '',
        internship: '',
        price: '',
        other_advantage: '',
        cvURL: '',
        author: store.state.userInfo.id // 保持作者ID不变
    };
};

// 提交表单处理函数（新增/更新简历）
const submitForm = async (id) => {
    if (id) { // 编辑已有简历（存在ID）
        // 校验必填字段（标题和PDF地址）
        if (state.userForm.cvURL !== "" && state.userForm.title !== "") {
            try {
                // 发送更新请求
                const res = await axios.patch("/cv/updateById", state.userForm);
                if (res.data.code === 0) {
                    ElMessage.success("简历信息更新成功");
                    // 清空表单并刷新页面
                    state.userForm = { author: store.state.userInfo.id };
                    location.reload();
                    ElMessage("请稍候，正在获取简历信息");
                } else {
                    ElMessage.error("未知错误，更新失败");
                }
            } catch (error) {
                ElMessage.error("网络请求失败，请重试");
            }
        } else {
            ElMessage.error("请先填写标题并上传简历PDF");
        }
    } else { // 新增简历（无ID）
        // 校验必填字段（标题和PDF地址）
        if (state.userForm.cvURL !== "" && state.userForm.title !== "") {
            try {
                // 发送新增请求
                await axios.post("/cv/add", state.userForm);
                ElMessage.success("简历创建成功");
                // 清空表单并刷新页面
                state.userForm = { author: store.state.userInfo.id };
                location.reload();
                ElMessage("请稍候，正在获取简历信息");
            } catch (error) {
                ElMessage.error("网络请求失败，请重试");
            }
        } else {
            ElMessage.error("请先填写标题并上传简历PDF");
        }
    }
};

// 获取用户简历列表函数
const getCvs = async (id) => {
    try {
        // 从后端获取当前用户的所有简历
        const form = await axios.get(`/cv/findByAuthor?author=${store.state.userInfo.id}`);
        state.Cvs = form.data.data; // 更新简历列表
    } catch (error) {
        ElMessage.error("获取简历列表失败，请重试");
    }
};

// 点击简历标题处理函数：加载简历到编辑表单
const clickCv = (id) => {
    const targetCv = state.Cvs.find(item => item.id === id); // 查找目标简历
    if (targetCv) {
        // 将简历数据填充到表单
        state.userForm = {
            ...targetCv,
            author: store.state.userInfo.id // 确保作者ID正确
        };
    }
};

// 组件挂载前钩子：获取简历列表
onBeforeMount(() => {
    getCvs(store.state.userInfo.id);
});
</script>

<style scoped lang="scss">
.el-row {
    margin-top: 20px;
    .box-card {
        text-align: center;
    }
}

/* 上传区域样式 */
.upload-demo {
    border: 2px dashed #e6e6e6;
    border-radius: 6px;
    cursor: pointer;
    padding: 60px 0;
    text-align: center;
    margin: 20px 0;
}

.el-upload__text {
    margin-top: 10px;
    color: #666;
}

.el-upload__tip {
    color: #999;
    font-size: 0.9em;
    margin-top: 5px;
}
</style>